<template>
  <div class="carousel">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>轮播图列表</span>
        <el-button type="success" icon="el-icon-plus" class="addBtn" @click="dialogTableVisible = true">新增</el-button>
      </div>

      <!--      列表-->
      <el-table :data="list" style="width: 100%">
        <el-table-column label="轮播图">
          <template slot-scope="scope">
            <img style="width: 100px" :src="BASE_URL + scope.row.carousel" alt="加载失败" class="carouselImg">
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCarousel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--      弹出框-->
      <el-dialog title="添加轮播图" :visible.sync="dialogTableVisible" width="500px" @close="cancel">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-upload
                  v-model="form.carousel"
                  class="upload-demo"
                  action=""
                  :http-request="uploadFile"
                  :file-list="fileList"
                  list-type="picture">
            <el-button size="mini" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form>
        <div slot="footer">
          <el-button @click="cancel" type="danger">取 消</el-button>
          <el-button type="success" @click="submit">确 定</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
  import {deleteCarousel, addCarousel, getCarousel, uploadFile} from '../../api/api'
  import {BASE_URL} from "../../settings"

  export default {
    name: "carousel",
    data() {
      return {
        BASE_URL,
        list: [],  //轮播图列表
        dialogTableVisible: false,
        rules: {},
        form: {
          carousel: ''
        },
        fileList: []
      }
    },
    methods: {
      //查询轮播图列表
      async getList() {
        const res = await getCarousel()
        this.list = res.data
      },
      //删除轮播图
      removeCarousel(row) {
        this.$confirm('确定取消订单么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await deleteCarousel({id: row._id})
          this.$message.success(res.msg)
          this.getList()
        }).catch(() => this.$message.info('取消删除'))
      },
      //取消表单
      cancel() {
        this.reset()
        this.dialogTableVisible = false
      },
      //重置表单
      reset() {
        this.form = {}
        this.$refs.form.resetFields()
      },
      //提交表单
      submit() {
        this.$refs.form.validate(async valid => {
          if (valid) {
            const res = await addCarousel(this.form)
            this.$message.success(res.msg)
            this.dialogTableVisible = false
            this.reset()
            this.getList()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      //文件上传
      async uploadFile(options) {
        let data = new FormData()
        data.append('file', options.file)
        const res = await uploadFile(data)
        this.$message.success(res.msg)
        this.form.carousel = res.data.url
      },
    },
    created() {
      this.getList()
    }
  }
</script>

<style scoped lang="scss">
  .carouselImg{
    object-fit: cover;
    max-height: 50px;
  }
  img {
    width: 50%;
  }
</style>
